<template>
  <div>
    起始位置：<el-input id="start" v-model="startName" style="width:60" />
    结束位置：<el-input id="end" v-model="endName" style="width:60" />
    <el-button @click="goView">查询</el-button>
    <div id="container" />
  </div>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {

  data() {
    return {
      // map:null,
      startName: '人民医院',
      endName: '南京艺术学院'
    }
  },
  created() {

  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: '413f4c9749af045188108b20478e57e8' // 申请key对应的秘钥
    }
    this.initAMap()
  },
  methods: {
    goView() {
      // eslint-disable-next-line no-undef
      const driving = new AMap.Driving({
        map: this.map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        // eslint-disable-next-line no-undef
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      const points = [
        { keyword: this.startName, city: '全国' },
        { keyword: this.endName, city: '全国' }
      ]

      driving.search(points, (status, result) => {
        // 未出错时，result即是对应的路线规划方案
        console.log('status=', status)
        console.log('result=', result)
      })
    },
    initAMap() {
      AMapLoader.load({
        key: '0223a43a924d693b489999d820f3456b', // 设置您的key
        version: '2.0',
        plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation', 'AMap.Driving', 'AMap.AutoComplete']

      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 15,

          center: [118.767413, 32.041544]

        })
        const autoOptions = {
          // city 限定城市，默认全国
          city: '全国',
          input: 'start'
        }
        // 实例化AutoComplete
        this.map.addControl(new AMap.AutoComplete(autoOptions))
        const autoOptions2 = {
          // city 限定城市，默认全国
          city: '全国',
          input: 'end'
        }
        // 实例化AutoComplete
        this.map.addControl(new AMap.AutoComplete(autoOptions2))
        // 根据关键字进行搜索
        /* autoComplete.search(this.startName, (status, result) => {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result)
        }) */

        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.ToolBar())
        this.map.addControl(new AMap.HawkEye())
        this.map.addControl(new AMap.MapType())
        this.map.addControl(new AMap.Geolocation())
      }).catch(e => {
        console.log(e)
      })
    }
  }

}
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
::v-deep .el-input__inner{
    width: 13%;
}
</style>
